<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
</template>

<script>
    // Vue3中的computed 是一个组合式的api，所以需要通过import 进行引入。
    import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
    export default {
        name: 'Demo',
        setup() {
            console.log('---setup---')
            // 数据
            let sum = ref(0);

            // Vue3最大的特点就是组合式api，使用组合式api向setup里面写声明周期钩子
            // 通过组合式API的形式去使用生命周期钩子
            onBeforeMount(() => {
                console.log('---onBeforeMount---')
            })
            onMounted(() => {
                console.log('---onMounted---')
            })
            onBeforeUpdate(() => {
                console.log('---onBeforeUpdate---')
            })
            onUpdated(() => {
                console.log('---onUpdated---')
            })
            onBeforeUnmount(() => {
                console.log('---onBeforeUnmount---')
            })
            onUnmounted(() => {
                console.log('---onUnmounted---')
            })

            // 返回一个对象（常用）
            return {
                sum
            }
        },

        //#region 
        // // 通过配置项的形式使用生命周期钩子
        // beforeCreate() {
        //     console.log('---------beforeCreate----------')
        // },
        // created() {
        //     console.log('---------created----------')
        // },
        // beforeMount() {
        //     console.log('---------beforeMount----------')
        // },
        // mounted() {
        //     console.log('---------mounted----------')
        // },
        // beforeUpdate() {
        //     console.log('---------beforeUpdate----------')
        // },
        // updated() {
        //     console.log('---------updated----------')
        // },
        // beforeUnmount() {
        //     console.log('---------beforeUnmount----------')
        // },
        // unmounted() {
        //     console.log('---------unmounted----------')
        // },
        //#endregion
    }
</script>

<style>

</style>